import React, { useState, useEffect } from 'react';
import { Divider, Radio, Table, Space, Tag, Form, Input, Button, Select, Modal, Popconfirm } from 'antd';
import type { TableColumnsType, TableProps } from 'antd';
import type { hrlistTS } from '../../store/crmsTS';
import { useAppDispatch, useAppSelector } from '../../store/reactreduxts';
import dayjs from 'dayjs';
import reducer, { async_searchlist, async_dellist } from '../../store/crmsSlice';
import Myfrom from './Myfrom';



const ShopList: React.FC = () => {

    //获取数据
    let obj = useAppSelector(state => state.crms1)
    let dispatch = useAppDispatch()

    /* 分页 */
    let [current, setCurrent] = useState<number>(1)//当前页数
    let [pageSize, setPageSize] = useState<number>(2)//每页条数
    let [total, setTotal] = useState<number>(obj.hrlist.length)//总共多少数据

    /* 表单验证时的回调 */
    const onFinish = (values: any) => {
        let obj = {
            ...values,
        }
        setPageSize(4)
        //编辑的接口
        dispatch(async_searchlist(obj))
    };
    //重置
    const [form] = Form.useForm();
    const chongzhi = () => {
        form.resetFields()
        /* 搜索接口 */
        dispatch(async_searchlist({}))
        setPageSize(2)
    }


    //控制对话框的显示隐藏
    const [isModalOpen, setIsModalOpen] = useState(false);
    const showModal = () => {
        setIsModalOpen(true);
    };
    const handleOk = () => {
        setIsModalOpen(false);
    };
    const handleCancel = () => {
        setIsModalOpen(false);
    };
    //对话框的标题
    let [title, setTitle] = useState('')
    //添加={} 编辑={...}
    let [itemobj, setItemobj] = useState({})

    //表头
    const columns: TableColumnsType<hrlistTS> = [
        {
            title: '岗位编号',
            dataIndex: 'bianhao',
        },
        {
            title: '岗位编码',
            dataIndex: 'bianma',
        },
        {
            title: '岗位名称',
            dataIndex: 'name',
        },
        {
            title: '岗位排序',
            dataIndex: 'paixu',
        },
        {
            title: '岗位状态',
            dataIndex: 'collect',
            render: (collect) => {
                return <Tag color={collect ? 'blue' : 'red'}>{collect ? '正常' : '异常'}</Tag>
            }
        },
        {
            title: '岗位时间',
            dataIndex: 'time',
            render: (time) => {
                return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
            }
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <a onClick={() => {
                        //显示
                        showModal()
                        //标题
                        setTitle('修改')
                        //编辑={ ...}
                        setItemobj(record)
                    }}>修改</a>
                    <Popconfirm
                        title="系统提示"
                        description="确定删除这条数据吗?"
                        onConfirm={() => {
                            dispatch(async_dellist(record.id))
                        }}
                        okText="是"
                        cancelText="否"
                    >
                        <a>删除</a>
                    </Popconfirm>
                </Space>
            ),
        },
    ];

    const [selectionType, setSelectionType] = useState<'checkbox' | 'radio'>('checkbox');

    return (
        <div>
            {/* 搜索 */}
            <Form layout="inline" onFinish={onFinish} form={form}>
                <Form.Item name="name" label="岗位名称">
                    <Input placeholder='请输入岗位名称' />
                </Form.Item>
                <Form.Item name="collect" label="岗位状态">
                    <Select
                        placeholder="请选择状态"
                        options={[
                            { value: true, label: '正常' },
                            { value: false, label: '异常' },
                        ]}
                    />
                </Form.Item>
                <Space>
                    <Button type='primary' htmlType="submit">搜索</Button>
                    <Button htmlType="button" onClick={chongzhi}>重置</Button>
                </Space>
            </Form>

            {/* 对话框 */}
            <div style={{ marginTop: '10px' }}>
                <Button type="primary" onClick={() => {
                    //显示
                    showModal()
                    //标题
                    setTitle('添加')
                    //添加={}
                    setItemobj({})
                }}>
                    添加
                </Button>
                <Modal
                    title={title}
                    closable={{ 'aria-label': 'Custom Close Button' }}
                    open={isModalOpen}
                    onOk={handleOk}
                    onCancel={handleCancel}
                    footer={null}
                >
                    <Myfrom key={new Date().getTime()} handleOk={handleOk} title={title} itemobj={itemobj}></Myfrom>
                </Modal>
            </div>

            {/* 表格 */}
            <Divider />
            <Table<hrlistTS>
                rowSelection={{ type: selectionType }}
                columns={columns}
                dataSource={obj.hrlist}
                rowKey={'id'}
                pagination={{
                    current,
                    pageSize,
                    total,
                    pageSizeOptions: [2, 4, 6],//指定每页显示多少条
                    showSizeChanger: true,//显示分页器
                    showQuickJumper: true,//显示跳转
                    onChange: (page, pageSize) => {
                        setCurrent(page)
                        setPageSize(pageSize)
                    }
                }}
            />
        </div>
    );
};

export default ShopList;
